<template>
    <div class="read-home-wrap">
        <div class="home-content">
      <span class="base-color back-arrow" @click="handleBack">
      </span>
            <div class="home-head">
                <div class="read-logo">
                    <img src="~assets/super-read/index-logo.png" alt="" />
                </div>
                <div class="change_course" @click="fetchNewMyCurr">
                    <img src="~assets/super-read/selectcourse.png" alt="" />
                    <p>切换课程</p>
                </div>
                <p class="checkcourse-title" v-if="lastStudy.level_title">
          <span class="title-color">上次学习：{{
            lastStudy.level_title || "无"
          }}</span>
                </p>
            </div>
            <div class="home-center">
                <div class="read-item1" v-if="has0" @click="goList(0)">
                    <img src="~assets/super-read/read_indexA.png" alt="" />
                    <span>{{hascourseList[0].level_title}}</span>
                </div>
                <div class="read-item1" v-if="has1" @click="goList(1)">
                    <img src="~assets/super-read/read_indexB.png" alt="" />
                    <span>{{hascourseList[1].level_title}}</span>
                </div>
                <div class="read-item1" v-if="has2" @click="goList(2)">
                    <img src="~assets/super-read/read_indexC.png" alt="" />
                    <span>{{hascourseList[2].level_title}}</span>
                </div>
            </div>
            <div class="home-center">
                <div class="read-item1" v-if="has3" @click="goList(3)">
                    <img src="~assets/super-read/read_indexD.png" alt="" />
                    <span>{{hascourseList[3].level_title}}</span>
                </div>
                <div class="read-item1" v-if="has4" @click="goList(4)">
                    <img src="~assets/super-read/blank_index.png" alt="" />
                    <span>{{hascourseList[4].level_title}}</span>
                </div>
                <div class="read-item1" v-if="has5" @click="goList(5)">
                    <img src="~assets/super-read/select_index.png" alt="" />
                    <span>{{hascourseList[5].level_title}}</span>
                </div>
            </div>
            <div class="home-bottom home_double">
                <div class="read-process">
                    <div class="process-text">
                        <span>文章总数</span>
                        <span class="process-num">{{ coursenum || 0 }}篇</span>
                    </div>
                </div>
                <div class="blank-process">
                    <div class="process-text">
                        <span>已学文章</span>
                        <span class="process-num">{{ hascourse || 0 }}篇</span>
                    </div>
                </div>
                <span class="total"
                >总用时 <i>{{ time }}</i></span
                >
            </div>
        </div>
        <moreModal
                :visible.sync="moreModalVisible"
                :courseList="courseList"
                @choseClick="readChose"
        />
    <Timetips ref="timetips"></Timetips>
    </div>
</template>
<script>
    import {
        fetchNewMyLastCurr,
        fetchNewMyCurr
    } from "@/services/super-read";
    import { startTime, stopTime } from '@/services/home.js'
    import moreModal from "./moreModal";
    import { SUCCESS_CODE } from "@/utils/const";
    import { mapState, mapMutations } from "vuex";
    import Timetips from "@/components/Timetips";
    export default {
        name: "superRead",
        components: {
            moreModal,
            Timetips
        },
        data() {
            return {
                lastStudy: {},
                courseList: [],
                moreModalVisible: false,
                statics: {},
                has0:0,
                has1:0,
                has2:0,
                has3:0,
                has4:0,
                has5:0,
                package_id:0,
                title:'',
                time:0,
                coursenum:0,
                hascourse:0,
                last_package_id:sessionStorage.getItem('last_package_id'),
                hascourseList:[]
            };
        },
        async created() {
            let { title, package_id } = this.$route.query;
            this.package_id = package_id;
			console.log('----------------------------',this.package_id);
            this.title = title;
			if(this.last_package_id != undefined && this.last_package_id > 0 && this.last_package_id != null){
				if(this.package_id != this.last_package_id){
					// this.stoptime();
                    sessionStorage.setItem('last_package_id',this.package_id)
                    this.last_package_id = this.package_id
                    // this.starttime();
				}
			}else{
				sessionStorage.setItem('last_package_id',this.package_id)
                this.last_package_id = this.package_id
                // this.starttime();
			}
            this.init();
        },
        computed: {
            ...mapState({
                readCourseInfo: (state) => state.readCourseInfo,
            }),
        },
        methods: {
            ...mapMutations(["setReadCourseInfo"]),
            init() {
                fetchNewMyLastCurr({
                    package_id:this.package_id
                }).then((res) => {
                    if (res.code === SUCCESS_CODE) {
                        this.time = res.data.time;
                        this.coursenum = res.data.coursenum;
                        this.hascourse = res.data.hascourse;
                        this.lastStudy = res.data.last;
                        let _this = this;
                        this.has0 = this.has1 = this.has2 = this.has3 = this.has4 = this.has5 = 0;
                        this.hascourseList = [];
                        res.data.info.forEach(function (n,j) {
                            if(j == 0){
                                _this.has0 = 1;
                            }else if(j == 1){
                                _this.has1 = 1;
                            }else if(j == 2){
                                _this.has2 = 1;
                            }else if(j == 3){
                                _this.has3 = 1;
                            }else if(j == 4){
                                _this.has4 = 1;
                            }else if(j == 5){
                                _this.has5 = 1;
                            }
                            if(n.question_type == 6){
                                n.level_title = '完形填空'
                            }
                            _this.hascourseList.push(n);
                        })
                    }
                });
            },
            fetchStatics(id) {
                fetchNewMyLastCurr({ package_id: id }).then((res) => {
                    if (res.code === SUCCESS_CODE) {
                        this.package_id = id;
                        this.time = res.data.time;
                        this.coursenum = res.data.coursenum;
                        this.hascourse = res.data.hascourse;
                        this.lastStudy = res.data.last;
                        let _this = this;
                        this.has0 = this.has1 = this.has2 = this.has3 = this.has4 = this.has5 = 0;
                        this.hascourseList = [];
                        res.data.info.forEach(function (n,j) {
                            if(n.question_type == 6){
                                n.level_title = '完形填空'
                            }
                            _this.hascourseList.push(n);
                            if(j == 0){
                                _this.has0 = 1;
                            }else if(j == 1){
                                _this.has1 = 1;
                            }else if(j == 2){
                                _this.has2 = 1;
                            }else if(j == 3){
                                _this.has3 = 1;
                            }else if(j == 4){
                                _this.has4 = 1;
                            }else if(j == 5){
                                _this.has5 = 1;
                            }
                        })
                    }
                });
            },
            fetchNewMyCurr() {
                fetchNewMyCurr({
                }).then((res) => {
                    if (res.code === SUCCESS_CODE) {
                        if (res.data.length) {
                            this.moreModalVisible = true;
                            let _course = [];
                            res.data.forEach(function (n,j) {
                                let _Data = {
                                    'title':n.level_title,
                                    'id':n.id
                                };
                                _course.push(_Data)
                            })
                            this.courseList = _course
                        } else {
                            this.$message.error("您先购买课程~");
                        }
                    }
                });
            },
            readChose(item) {
                this.moreModalVisible = false;
                this.lastStudy = item;
                console.log(item);
                this.setReadCourseInfo(item);
                this.fetchStatics(item.id);
            },
            goList(type) {
                if (!this.hascourseList[type].id) {
                    this.$message.error("您先选择课程~");
                } else {
                    // this.setReadCourseInfo(Object.assign(this.readCourseInfo, { type }));
                    console.log('package_id',this.package_id);
                    this.$router.push({
                        path: "/super-read/check-point",
                        query: { type:this.hascourseList[type].question_type,id:this.hascourseList[type].id,parent_id:this.package_id,isnew:1,title:this.hascourseList[type].level_title},
                    });
                }
            },
		async starttime () {
			let params = {
				package_id: this.package_id
			}
			let data = await startTime(params)
			if (data.code === 1) {
				console.log('start time success');
			} else {	
				this.$toast(data.info);
				console.log('start time fail');
				sessionStorage.setItem('last_package_id',0)
				this.last_package_id = 0;
				this.$router.replace({
					path: '/'
			})
			return false;
			}
		},
			async stoptime () {
				// let params = {
				// 	package_id: this.last_package_id
				// }
				// let data = await stopTime(params)
				// if (data.code === 1) {
				// 	console.log('stop time success');
				// } else {
				// 	console.log('stop time fail');
				// }
			},
			handleBack () {
				// this.stoptime();
				sessionStorage.setItem('last_package_id',0)
				this.last_package_id = 0;
				this.$router.replace({
					path: '/'
				})
			}
        },
        mounted() {
        },
  beforeDestroy() {
    console.log("Home")
    this.$refs.timetips.stopTimer();
    this.$refs.timetips.stopEndTimer();
  },
    };
</script>
<style lang="less">
    @import url("./index.less");
    .change_course{
        float: right;
        margin-right: 120px;
        margin-top: -40px;
        cursor: pointer;
    }
    .read-item1{
        position: relative;
        span{
            position: absolute;
            top: 28px;
            left: 25px;
            font-size: 20px;
            color: #fff;
        }
    }
    .read-home-wrap{
        background: url("~assets/super-read/index-bg2.png") center/100% 100% no-repeat !important;
    }
</style>
